<template>
    <div class="textarea"></div>
    <div class="former">
        <div class="header" >
            <h2>欢迎来到一盏课堂</h2>
        </div>
        <el-form ref="formRef" :model="form" label-width="120px">
            <h1>个人登记表单</h1>
            <hr>
            <el-form-item :label="state.msg.name.title" id="name" @click="handleFix($event)">
                <p>{{state.msg.name.description}}</p>
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item :label="state.msg.degree.title" id="degree" @click="handleFix($event)">
                <div class="knowledge">
                    <p>{{state.msg.degree.description}}</p>
                    <el-radio-group v-model="form.resource">
                        <el-radio label="高中"></el-radio>
                        <el-radio label="大学"></el-radio>
                        <el-radio label="硕士"></el-radio>
                        <el-radio label="博士"></el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item :label="state.msg.native.title" id="native" @click="handleFix($event)">
                <el-select v-model="form.region" placeholder="北京">
                    <el-option label="北京" value="shanghai"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="state.msg.evaluate.title" id="evaluate" @click="handleFix($event)">
                <table>
                    <tr>
                        <th v-for="item1 of state.level">{{item1}}</th>
                    </tr>
                    <tr>
                        <td>{{state.type.type1}}</td>
                        <td v-for="item of 4">
                            <input type="radio" name="沟通技巧" :value="item">
                        </td>
                    </tr>
                    <tr>
                        <td>{{state.type.type2}}</td>
                        <td v-for="item of 4">
                            <input type="radio" name="时间观念" :value="item">
                        </td>
                    </tr>
                    <tr>
                        <td>{{state.type.type3}}</td>
                        <td v-for="item of 4">
                            <input type="radio" name="技能熟练" :value="item">
                        </td>
                    </tr>
                </table>
            </el-form-item>

        </el-form>
    </div>
</template>

<script setup>
    import { reactive,ref} from 'vue'
    import {useStore} from 'vuex';
    import {useRouter} from 'vue-router'
    const state = useStore().state;
    const router = useRouter()
    const form = reactive({
        name: '',
        region: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
    })
    const handleFix = (event)=>{
        console.log(event)
        router.push({
            name:"FormFix",
            params:{
                current_point:event.target.innerHTML
            }
        })
    }

</script>

<style lang="less">
    .textarea{
        width: 20%;
        height: 100%;
    }
    .former{
        width:78%;
    }
    .el-form{
        padding-left: 20px;
    }
    .el-form h1{
        font-size: 20px;
    }
    .el-form-item__label{
        font-size: 15px;
        color: #000;
        font-weight: bold;
        text-align: left;
    }
    .knowledge{
        display: block;
    }
    .el-form-item p {
        color: dimgrey;
        margin: 0;
    }
    .former .header{
        background-color: dodgerblue;
        color: honeydew;
        border-radius: 5px;
        line-height: 50px;
        padding-left: 20px;
    }
    .el-table{
        text-align: center;
    }
    table{
        width: 100%;
        text-align: center;
        border-collapse: collapse;
    }
    table>tr{
        border: 1px #808080 solid;
    }
    table th,td{
        width: 20%;
        height: 30px;
    }
</style>